webpack-dev-server 使用代理解决跨域

webpack-dev-server 使用代理解决跨域

在 webpack.config.js 中配置来自 webpack-dev-server 的 http-proxy 选项，能够用多种方式改变其行为。

如果有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么可以代理 URL 来解决跨域。

dev-server 使用了的 http-proxy-middleware 包。

1. 在 localhost:3000 上有后端服务的话，你可以这样启用代理：

devServer: {
    proxy: {
        "/api": "http://localhost:3000"
    }
}

以上请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users

1. 如果接口并没有 /api 的路径 ，可以这样：

devServer: {
    proxy: {
      "/api": {
          target: "http://localhost:3000",
          pathRewrite: {"^/api" : ""}
      }
    }
}

这样当请求 /api/getInfo 时会被代理到请求 http://localhost:3000/getInfo

如果是 vue-cli 生成的项目结构，可以在 config/index.js 中配置

dev: {
      proxyTable: {
      "/api": {
        target: "http://localhost:7001",
        pathRewrite: { "^/api": "" }
      }
    }
}